import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from './reducers'
import AppContainer from './App'

/* 初始化redux store */
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : () => {};

const middleWare = applyMiddleware(thunk);

const enhancer = compose(middleWare, reduxDevtools);

const store = createStore(reducer, enhancer);


const render = Component => {
    ReactDom.render(
        <Provider store={store}>
            <BrowserRouter>
                <Component />
            </BrowserRouter>
        </Provider>,
        document.getElementById('root')
    )
}

render(AppContainer)

// 热更新
if(module.hot){
    module.hot.accept('./App.jsx', () => {
        const NextApp = require('./App.jsx').default;

        // 重新渲染
        render(NextApp);
    })
}